--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Commit b4e3e2640ee1eb06461bdb644cabab49c4a67df5
Parents : 72809ef
Author : Ivan <ivan@quad4.io>
Signature : Signature validation error
Date : 2026-05-30T13:05:09-05:00
refactor(ping-page): remove eyebrow text from PingPage component and enhance ToolsPageHeader with back navigation link
Changes
2 files changed, 17 insertions(+), 26 deletions(-)
Diff
diff --git a/meshchatx/src/frontend/components/ping/PingPage.vue b/meshchatx/src/frontend/components/ping/PingPage.vue
index 0c9bd457..febe35fb 100644
--- a/meshchatx/src/frontend/components/ping/PingPage.vue
+++ b/meshchatx/src/frontend/components/ping/PingPage.vue
@@ -7,7 +7,6 @@
icon="radar"
:title="$t('ping.title')"
:description="$t('tools.ping.description')"
- :eyebrow="$t('app.tools')"
accent="blue"
/>
<div
diff --git a/meshchatx/src/frontend/components/tools/ToolsPageHeader.vue b/meshchatx/src/frontend/components/tools/ToolsPageHeader.vue
index 6928ca2f..df181c04 100644
--- a/meshchatx/src/frontend/components/tools/ToolsPageHeader.vue
+++ b/meshchatx/src/frontend/components/tools/ToolsPageHeader.vue
@@ -2,9 +2,18 @@
<template>
<div
- class="flex flex-wrap items-center justify-between gap-2 px-3 sm:px-4 md:px-6 py-3 sm:py-4 border-b border-gray-200 dark:border-zinc-800 bg-slate-50 dark:bg-zinc-950 shrink-0 min-w-0"
+ class="flex flex-wrap items-center gap-x-2 gap-y-2 pl-1.5 pr-3 sm:pl-2 sm:pr-4 md:pl-4 md:pr-6 py-3 sm:py-4 border-b border-gray-200 dark:border-zinc-800 bg-slate-50 dark:bg-zinc-950 shrink-0 min-w-0"
>
- <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+ <RouterLink
+ :to="backTo"
+ class="inline-flex items-center justify-center gap-0.5 sm:gap-1 rounded-lg pl-0 pr-1.5 sm:pr-2 py-2 min-h-9 min-w-9 sm:min-w-0 text-sm font-medium text-gray-600 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800/80 transition-colors shrink-0 order-first"
+ :aria-label="$t('tools.back_to_tools')"
+ >
+ <MaterialDesignIcon icon-name="chevron-left" class="size-6 sm:size-5 shrink-0" />
+ <span class="hidden sm:inline truncate max-w-[8rem]">{{ resolvedBackLabel }}</span>
+ </RouterLink>
+
+ <div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1 basis-0">
<div class="p-2 rounded-lg shrink-0" :class="iconWrapClass">
<MaterialDesignIcon :icon-name="icon" class="size-5 sm:size-6" :class="iconClass" />
</div>
@@ -23,16 +32,9 @@
</p>
</div>
</div>
- <div class="flex items-center gap-2 shrink-0 w-full sm:w-auto justify-end">
+
+ <div v-if="$slots.actions" class="flex items-center gap-2 shrink-0 ml-auto">
<slot name="actions" />
- <RouterLink
- to="/tools"
- class="inline-flex items-center gap-2 text-sm hover:underline shrink-0"
- :class="backLinkClass"
- >
- <MaterialDesignIcon icon-name="arrow-left" class="size-4" />
- {{ $t("tools.back_to_tools") }}
- </RouterLink>
</div>
</div>
</template>
@@ -44,62 +46,50 @@ const ACCENT = {
blue: {
wrap: "bg-blue-100 dark:bg-blue-900/30",
icon: "text-blue-600 dark:text-blue-400",
- link: "text-blue-600 dark:text-blue-300",
},
indigo: {
wrap: "bg-indigo-100 dark:bg-indigo-900/30",
icon: "text-indigo-600 dark:text-indigo-400",
- link: "text-indigo-600 dark:text-indigo-300",
},
teal: {
wrap: "bg-teal-100 dark:bg-teal-900/30",
icon: "text-teal-600 dark:text-teal-400",
- link: "text-teal-600 dark:text-teal-300",
},
purple: {
wrap: "bg-purple-100 dark:bg-purple-900/30",
icon: "text-purple-600 dark:text-purple-400",
- link: "text-purple-600 dark:text-purple-300",
},
green: {
wrap: "bg-green-100 dark:bg-green-900/30",
icon: "text-green-600 dark:text-green-400",
- link: "text-green-600 dark:text-green-300",
},
orange: {
wrap: "bg-orange-100 dark:bg-orange-900/30",
icon: "text-orange-600 dark:text-orange-400",
- link: "text-orange-600 dark:text-orange-300",
},
cyan: {
wrap: "bg-cyan-100 dark:bg-cyan-900/30",
icon: "text-cyan-600 dark:text-cyan-400",
- link: "text-cyan-600 dark:text-cyan-300",
},
rose: {
wrap: "bg-rose-100 dark:bg-rose-900/30",
icon: "text-rose-600 dark:text-rose-400",
- link: "text-rose-600 dark:text-rose-300",
},
violet: {
wrap: "bg-violet-100 dark:bg-violet-900/30",
icon: "text-violet-600 dark:text-violet-400",
- link: "text-violet-600 dark:text-violet-300",
},
amber: {
wrap: "bg-amber-100 dark:bg-amber-900/30",
icon: "text-amber-600 dark:text-amber-400",
- link: "text-amber-600 dark:text-amber-300",
},
sky: {
wrap: "bg-sky-100 dark:bg-sky-900/30",
icon: "text-sky-600 dark:text-sky-400",
- link: "text-sky-600 dark:text-sky-300",
},
zinc: {
wrap: "bg-zinc-100 dark:bg-zinc-800",
icon: "text-zinc-600 dark:text-zinc-400",
- link: "text-zinc-600 dark:text-zinc-300",
},
};
@@ -116,6 +106,8 @@ export default {
default: "blue",
validator: (v) => Object.prototype.hasOwnProperty.call(ACCENT, v),
},
+ backTo: { type: [String, Object], default: "/tools" },
+ backLabel: { type: String, default: "" },
},
computed: {
palette() {
@@ -127,8 +119,8 @@ export default {
iconClass() {
return this.palette.icon;
},
- backLinkClass() {
- return this.palette.link;
+ resolvedBackLabel() {
+ return this.backLabel || this.$t("app.tools");
},
},
};
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────